<app-toolbar>
    <nz-space>
        <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
            <i nz-icon nzType="reload" [nzSpin]="loading"></i>
            刷新
        </button>
        <app-search-box *nzSpaceItem (onSearch)="search($event)"></app-search-box>

        <button *nzSpaceItem nz-button nzType="primary" (click)="handleNew()">
            <i nz-icon nzType="plus"></i>
            创建
        </button>

        <app-export *nzSpaceItem [href]="'validator/export'"></app-export>

        <app-import *nzSpaceItem [url]="'validator/import'"></app-import>

        <button *nzSpaceItem nz-button nzType="primary" nzDanger (click)="handleBatchDel()">
            批量删除
        </button>
    </nz-space>
</app-toolbar>

<ng-template #totalTemplate let-total>总共 {{ total }} 条</ng-template>
<nz-table #basicTable [nzData]="datum" [nzFrontPagination]="false" [nzLoading]="loading" nzShowPagination
    [nzTotal]="total" nzShowSizeChanger [nzShowTotal]="totalTemplate" (nzPageSizeChange)="pageSizeChange($event)"
    (nzPageIndexChange)="pageIndexChange($event)" [nzPageSize]="pageSize" [nzPageIndex]="pageIndex"
    (nzQueryParams)="onQuery($event)">
    <thead>
        <tr>
            <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="handleAllChecked($event)">
            </th>
            <th nzColumnKey="id" [nzSortFn]="true">ID</th>
            <th nzColumnKey="product_id">产品id</th>
            <th nzColumnKey="again">再次提醒间隔</th>
            <th nzColumnKey="delay">延迟时间</th>
            <th nzColumnKey="template">模板</th>
            <th nzColumnKey="title">标题</th>
            <th nzColumnKey="total">总数</th>
            <th nzColumnKey="type">类型</th>
            <th nzColumnKey="level">等级</th>
            <th nzColumnKey="expression">表达式</th>
            <th nzColumnKey="disabled">状态</th>
            <th nzColumnKey="created" [nzSortFn]="true">日期</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of basicTable.data; let i = index" (dblclick)="read(data)"
            [style]="{ fontWeight: data.read ? '' : 'bold' }">
            <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="handleItemChecked(data.id, $event)"></td>
            <td>{{ data.id }}</td>
            <td>{{ data.product_id }}</td>
            <td>{{ data.again }}</td>
            <td>{{ data.delay }}</td>
            <td>{{ data.template }}</td>
            <td>{{ data.title }}</td>
            <td>{{ data.total }}</td>
            <td>{{ data.type }}</td>
            <td>{{ data.level }}</td>
            <td>{{ data.expression }}</td>
            <td>
                <nz-tag nzColor="success" *ngIf="data.disabled"> 启用 </nz-tag>
                <nz-tag nzColor="error" *ngIf="!data.disabled"> 禁用 </nz-tag>
            </td>

            <td>{{ data.created | date }}</td>
            <td>
                <a (click)="edit(data.id)">
                    <i nz-icon nzType="edit"></i>
                </a>
                <nz-divider nzType="vertical"></nz-divider>
                <a nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="delete(data.id)" (nzOnCancel)="cancel()"
                    nzPopconfirmPlacement="topLeft">
                    <i nz-icon nzType="delete"></i>
                </a>

                <nz-divider nzType="vertical"></nz-divider>
                <a *ngIf="!data.disabled" (click)="disable(1, data.id)">
                    启用
                </a>
                <a *ngIf="data.disabled" (click)="disable(0, data.id)">
                    禁用
                </a>
            </td>
        </tr>
    </tbody>
</nz-table>
